<template>
  <view class="page">
    <image src="/static/dingbu.png" class="mine-navbar-bg" mode="aspectFill" />
    <u-navbar title="检测信息" :autoBack="true" leftIconColor="#fff" bgColor="transparent" :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder />
    <view style="height: 80rpx;"></view>

    <view class="content">
      <!-- 基本信息 -->
      <view class="card">
        <view class="section-title">基本信息</view>
        <view class="kv">
          <view class="row"><text class="k">实验室编号</text><text class="v">{{ base.code }}</text></view>
          <view class="row"><text class="k">样品名称</text><text class="v">{{ base.sampleName }}</text></view>
          <view class="row"><text class="k">检测类别</text><text class="v">{{ base.typeName }}</text></view>
          <view class="row"><text class="k">检测机构</text><text class="v">{{ base.org }}</text></view>
          <view class="row"><text class="k">判定结果</text>
            <view class="judge" :class="judgeClass(base.judge)">{{ base.judge }}</view>
          </view>
          <view class="row"><text class="k">状态</text>
            <text :class="{ 'flag-green': base.submitted, 'flag-red': !base.submitted }">{{ base.submitted ? '已提交' : '未提交' }}</text>
          </view>
        </view>
      </view>

      <!-- 指标信息 -->
      <view class="card">
        <view class="section-title">指标信息</view>
        <view class="table">
          <view class="thead">
            <text class="th name">指标</text>
            <text class="th val">结果</text>
            <text class="th std">标准</text>
            <text class="th judge">判定</text>
          </view>
          <view class="tbody">
            <view class="tr" v-for="it in items" :key="it.name">
              <text class="td name">{{ it.name }}</text>
              <text class="td val">{{ it.value }}</text>
              <text class="td std">{{ it.std }}</text>
              <text class="td judge" :class="{ 'ok': it.pass, 'bad': !it.pass }">{{ it.pass ? '合格' : '不合格' }}</text>
            </view>
          </view>
        </view>

        <view class="ops">
          <button class="btn ghost" @click="goBack">返回</button>
          <button class="btn primary" @click="submit">提交</button>
        </view>
      </view>
    </view>
  </view>
 </template>

<script>
export default {
  data() {
    return {
      base: {
        code: '', sampleName: '土壤', typeName: '监督抽检', org: '山东天元盈康检测评估技术有限公司', judge: '未知', submitted: false
      },
      items: [
        { name: 'pH', value: '6.5', std: '6.0-7.5', pass: true },
        { name: '有机质', value: '35 g/kg', std: '≥ 30 g/kg', pass: true },
        { name: '镉(Cd)', value: '0.45 mg/kg', std: '≤ 0.6 mg/kg', pass: true }
      ]
    }
  },
  onLoad(query) {
    if (query && query.code) this.base.code = query.code
  },
  methods: {
    judgeClass(j) { return { pass: j === '合格', unknown: j === '未知', unpass: j === '不合格' } },
    submit() { uni.showToast({ title: '已提交', icon: 'success' }); this.base.submitted = true; this.base.judge = '合格' },
    goBack() { uni.navigateBack() }
  }
}
</script>

<style lang="scss">
$brand: #29a74d; $brand-weak: #e9f7ee; $brand-border: #cfe9db; $brand-strong: #239243;
.mine-navbar-bg { position: fixed; top: 0; left: 0; width: 100%; height: 180rpx; z-index: 2; }
.page { background: #f6f7fb; min-height: 100vh; }
.content { padding: 24rpx; }
.card { background: #fff; border: 1rpx solid #e3f3ea; border-radius: 18rpx; padding: 20rpx; margin-bottom: 20rpx; box-shadow: 0 8rpx 22rpx rgba(12,18,28,.05); }
.section-title { font-weight: 700; color: #111827; margin-bottom: 8rpx; }
.kv .row { display: flex; align-items: center; gap: 16rpx; padding: 10rpx 0; }
.kv .k { width: 180rpx; color: #6b7280; }
.kv .v { flex: 1; color: #1f2937; }
.judge { font-size: 24rpx; padding: 6rpx 16rpx; border-radius: 999rpx; background: #f3f4f6; color: #6b7280; border: 1rpx solid #e5e7eb; }
.judge.pass { color: $brand-strong; background: $brand-weak; border-color: $brand-border; }
.judge.unpass { color: #ef4444; background: #fff1f2; border-color: #fecaca; }
.judge.unknown { color: #9ca3af; background: #f3f4f6; border-color: #e5e7eb; }
.flag-green { color: $brand-strong; } .flag-red { color: #ef4444; }

.table { overflow: hidden; border: 1rpx solid #eef2f7; border-radius: 14rpx; }
.thead, .tr { display: grid; grid-template-columns: 2fr 1fr 1.5fr 1fr; }
.thead { background: $brand-weak; color: $brand-strong; font-weight: 600; }
.th, .td { padding: 16rpx; font-size: 26rpx; border-bottom: 1rpx solid #eef2f7; }
.tbody .tr:nth-child(odd) { background: #fafafa; }
.td.judge.ok { color: $brand-strong; } .td.judge.bad { color: #ef4444; }

.ops { display: flex; justify-content: flex-end; gap: 16rpx; margin-top: 16rpx; }
.btn { height: 68rpx; line-height: 68rpx; padding: 0 28rpx; border-radius: 999rpx; font-size: 26rpx; border: none; }
.btn.ghost { background: #fff; color: $brand-strong; box-shadow: inset 0 0 0 1rpx $brand-border; }
.btn.primary { background: linear-gradient(90deg, lighten($brand, 2%), $brand-strong); color: #fff; box-shadow: 0 6rpx 14rpx rgba(37, 154, 68, .22); }
</style>
